home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / advanced-gallery.izs next >
Text File  |  2005-09-01  |  11KB  |  338 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Advanced Gallery script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>This robust gallery script allows you to display and rotate entire blocks of HTML on demand. Display images, text, or rich HTML in a dynamic manner. Set the script to automatically cycle through the contents like in a scroller, or via manual selecting. Furthermore, we made inputting the contents a breeze- simply wrap desired blocks of HTML in a special <DIV> tag, and they are automatically added to the gallery. It doesn't get easier than this.
  9.  
  10. This script works in IE5+ and NS6+, degrading well with the rest. Lower end browsers will simply see all of the content at once.
  11.  
  12.  
  13. <!/DESCRIPTION> 
  14.  
  15. <!CATEGORY>dynamic content<!/CATEGORY>
  16.  
  17. <!SCRIPT>
  18. <!-- START OF SCRIPT -->
  19. <!-- Step 1: Add the below code to the <HEAD> section of your page: -->
  20. <style type="text/css">
  21.  
  22. .gallerycontroller{
  23. width: 250px
  24. }
  25.  
  26. .gallerycontent{
  27. width: 250px;
  28. height: 200px;
  29. border: 1px solid black;
  30. background-color: #DFDFFF;
  31. padding: 3px;
  32. display: block;
  33. }
  34.  
  35. </style>
  36.  
  37. <script type="text/javascript">
  38.  
  39. /***********************************************
  40. * Advanced Gallery script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  41. * This notice must stay intact for legal use
  42. * Visit http://www.dynamicdrive.com/ for full source code
  43. ***********************************************/
  44.  
  45. var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
  46. var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.
  47.  
  48. if (document.getElementById){
  49. document.write('<style type="text/css">\n')
  50. document.write('.gallerycontent{display:none;}\n')
  51. document.write('</style>\n')
  52. }
  53.  
  54. var selectedDiv=0
  55. var totalDivs=0
  56.  
  57. function getElementbyClass(classname){
  58. partscollect=new Array()
  59. var inc=0
  60. var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
  61. for (i=0; i<alltags.length; i++){
  62. if (alltags[i].className==classname)
  63. partscollect[inc++]=alltags[i]
  64. }
  65. }
  66.  
  67. function contractall(){
  68. var inc=0
  69. while (partscollect[inc]){
  70. partscollect[inc].style.display="none"
  71. inc++
  72. }
  73. }
  74.  
  75. function expandone(){
  76. var selectedDivObj=partscollect[selectedDiv]
  77. contractall()
  78. selectedDivObj.style.display="block"
  79. if (document.gallerycontrol)
  80. temp.options[selectedDiv].selected=true
  81. selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
  82. if (displaymode=="auto")
  83. autocontrolvar=setTimeout("expandone()",tickspeed)
  84. }
  85.  
  86. function populatemenu(){
  87. temp=document.gallerycontrol.menu
  88. for (m=temp.options.length-1;m>0;m--)
  89. temp.options[m]=null
  90. for (i=0;i<totalDivs;i++){
  91. var thesubject=partscollect[i].getAttribute("subject")
  92. thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
  93. temp.options[i]=new Option(thesubject,"")
  94. }
  95. temp.options[0].selected=true
  96. }
  97.  
  98. function manualcontrol(menuobj){
  99. if (displaymode=="manual"){
  100. selectedDiv=menuobj
  101. expandone()
  102. }
  103. }
  104.  
  105. function preparemode(themode){
  106. displaymode=themode
  107. if (typeof autocontrolvar!="undefined")
  108. clearTimeout(autocontrolvar)
  109. if (themode=="auto"){
  110. document.gallerycontrol.menu.disabled=true
  111. autocontrolvar=setTimeout("expandone()",tickspeed)
  112. }
  113. else
  114. document.gallerycontrol.menu.disabled=false
  115. }
  116.  
  117.  
  118. function startgallery(){
  119. if (document.getElementById("controldiv")) //if it exists
  120. document.getElementById("controldiv").style.display="block"
  121. getElementbyClass("gallerycontent")
  122. totalDivs=partscollect.length
  123. if (document.gallerycontrol){
  124. populatemenu()
  125. if (document.gallerycontrol.mode){
  126. for (i=0; i<document.gallerycontrol.mode.length; i++){
  127. if (document.gallerycontrol.mode[i].checked)
  128. displaymode=document.gallerycontrol.mode[i].value
  129. }
  130. }
  131. }
  132. if (displaymode=="auto" && document.gallerycontrol)
  133. document.gallerycontrol.menu.disabled=true
  134. expandone()
  135. }
  136.  
  137. if (window.addEventListener)
  138. window.addEventListener("load", startgallery, false)
  139. else if (window.attachEvent)
  140. window.attachEvent("onload", startgallery)
  141. else if (document.getElementById)
  142. window.onload=startgallery
  143.  
  144. </script>
  145. <!-- The only two parts you need to edit above is the style sheet (to control the content area's appearance), and also, a variable within the script (tickspeed).
  146.  
  147. Step 2: Insert the below HTML where you wish the gallery to appear:
  148. -->
  149. <div class="gallerycontent" subject="What is JavaScript?">
  150. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  151. </div>
  152.  
  153. <div class="gallerycontent" subject="Java & JavaScript Differences">
  154. Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
  155. </div>
  156.  
  157. <div class="gallerycontent" subject="What is DHTML?">
  158. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  159. </div>
  160.  
  161. <!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->
  162.  
  163. <div id="controldiv" style="display:none" class="gallerycontroller">
  164. <form name="gallerycontrol">
  165.  
  166. <select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
  167. <option>Blank form</option>
  168. </select><br>
  169.  
  170. Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">
  171.  
  172. </form>
  173. </div>
  174. <!-- END OF SCRIPT -->
  175. <!/SCRIPT>
  176.  
  177. <!PREVIEW>
  178. <!-- START OF SCRIPT -->
  179.  
  180. <!-- Step 1: Add the below code to the <HEAD> section of your page: -->
  181. <style type="text/css">
  182.  
  183. .gallerycontroller{
  184. width: 250px
  185. }
  186.  
  187. .gallerycontent{
  188. width: 250px;
  189. height: 200px;
  190. border: 1px solid black;
  191. background-color: #DFDFFF;
  192. padding: 3px;
  193. display: block;
  194. }
  195.  
  196. </style>
  197.  
  198. <script type="text/javascript">
  199.  
  200. /***********************************************
  201. * Advanced Gallery script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  202. * This notice must stay intact for legal use
  203. * Visit http://www.dynamicdrive.com/ for full source code
  204. ***********************************************/
  205.  
  206. var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
  207. var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.
  208.  
  209. if (document.getElementById){
  210. document.write('<style type="text/css">\n')
  211. document.write('.gallerycontent{display:none;}\n')
  212. document.write('</style>\n')
  213. }
  214.  
  215. var selectedDiv=0
  216. var totalDivs=0
  217.  
  218. function getElementbyClass(classname){
  219. partscollect=new Array()
  220. var inc=0
  221. var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
  222. for (i=0; i<alltags.length; i++){
  223. if (alltags[i].className==classname)
  224. partscollect[inc++]=alltags[i]
  225. }
  226. }
  227.  
  228. function contractall(){
  229. var inc=0
  230. while (partscollect[inc]){
  231. partscollect[inc].style.display="none"
  232. inc++
  233. }
  234. }
  235.  
  236. function expandone(){
  237. var selectedDivObj=partscollect[selectedDiv]
  238. contractall()
  239. selectedDivObj.style.display="block"
  240. if (document.gallerycontrol)
  241. temp.options[selectedDiv].selected=true
  242. selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
  243. if (displaymode=="auto")
  244. autocontrolvar=setTimeout("expandone()",tickspeed)
  245. }
  246.  
  247. function populatemenu(){
  248. temp=document.gallerycontrol.menu
  249. for (m=temp.options.length-1;m>0;m--)
  250. temp.options[m]=null
  251. for (i=0;i<totalDivs;i++){
  252. var thesubject=partscollect[i].getAttribute("subject")
  253. thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
  254. temp.options[i]=new Option(thesubject,"")
  255. }
  256. temp.options[0].selected=true
  257. }
  258.  
  259. function manualcontrol(menuobj){
  260. if (displaymode=="manual"){
  261. selectedDiv=menuobj
  262. expandone()
  263. }
  264. }
  265.  
  266. function preparemode(themode){
  267. displaymode=themode
  268. if (typeof autocontrolvar!="undefined")
  269. clearTimeout(autocontrolvar)
  270. if (themode=="auto"){
  271. document.gallerycontrol.menu.disabled=true
  272. autocontrolvar=setTimeout("expandone()",tickspeed)
  273. }
  274. else
  275. document.gallerycontrol.menu.disabled=false
  276. }
  277.  
  278.  
  279. function startgallery(){
  280. if (document.getElementById("controldiv")) //if it exists
  281. document.getElementById("controldiv").style.display="block"
  282. getElementbyClass("gallerycontent")
  283. totalDivs=partscollect.length
  284. if (document.gallerycontrol){
  285. populatemenu()
  286. if (document.gallerycontrol.mode){
  287. for (i=0; i<document.gallerycontrol.mode.length; i++){
  288. if (document.gallerycontrol.mode[i].checked)
  289. displaymode=document.gallerycontrol.mode[i].value
  290. }
  291. }
  292. }
  293. if (displaymode=="auto" && document.gallerycontrol)
  294. document.gallerycontrol.menu.disabled=true
  295. expandone()
  296. }
  297.  
  298. if (window.addEventListener)
  299. window.addEventListener("load", startgallery, false)
  300. else if (window.attachEvent)
  301. window.attachEvent("onload", startgallery)
  302. else if (document.getElementById)
  303. window.onload=startgallery
  304.  
  305. </script>
  306. <!-- The only two parts you need to edit above is the style sheet (to control the content area's appearance), and also, a variable within the script (tickspeed).
  307.  
  308. Step 2: Insert the below HTML where you wish the gallery to appear:
  309. -->
  310. <div class="gallerycontent" subject="What is JavaScript?">
  311. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  312. </div>
  313.  
  314. <div class="gallerycontent" subject="Java & JavaScript Differences">
  315. Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
  316. </div>
  317.  
  318. <div class="gallerycontent" subject="What is DHTML?">
  319. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  320. </div>
  321.  
  322. <!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->
  323.  
  324. <div id="controldiv" style="display:none" class="gallerycontroller">
  325. <form name="gallerycontrol">
  326.  
  327. <select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
  328. <option>Blank form</option>
  329. </select><br>
  330.  
  331. Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">
  332.  
  333. </form>
  334. </div>
  335. <!-- END OF SCRIPT -->
  336. <!/PREVIEW>
  337.  
  338. <!RELATED>NONE<!/RELATED>